<template>
	<view class="App_col App_bg">
		<!--  #ifdef H5 -->
		<app-header></app-header>
		<!--  #endif -->
		<view class="tphone">输入你的验证码</view>
		<view class="sendmsg">已向{{ mobile }}发送短信验证码</view>
		<view class="codes">
			<view v-for="(item,index) in codes" :key="index" class="code">
				<input type="text" class="border-input">
			</view>
		</view>
		<view class="aginsend rseend">重发验证码<text class="time">（<text>60</text>s）</text></view>
		<!-- <view class="aginsend send">重发验证码</view> -->
		<view class="next_page">
			<navigator class="no_avtive">下一步</navigator>
			<!-- <navigator class="next_avtive">下一步</navigator> -->
		</view>
	</view>
</template>

<script>

import AppHeader from '@/components/App_transparent_header'

export default {
	name: 'login-code',
	components: {
		'app-header': AppHeader
	},
	data() {
		return {
			mobile: '',
			codes: new Array(4)
		}
	}
}
</script>

<style scoped>
@import url("../../../static/css/module/loginProcess.scss");

.next_page {
    margin-top: 59px;
}

.sendmsg {
    text-align: center;
    font-size: 24px;
    margin-top: 29px;
    color: #999999;
    line-height: 1;
}

.codes {
    display: flex;
    justify-content: center;
    margin-top: 69px;
}

.code + .code {
    margin-left: 20px;
}

.border-input{
    width: 80px;
    height: 100px;
    border: 4px solid #D4D4D3;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 72px;
}

#sn1 {
    margin-left: 0;
}

.aginsend {
    margin-top: 40px;
    text-align: center;
    color: #999999;
    clear: both;
    font-size: 30px;
    line-height: 1;
}

.send {
    color: black;
}
</style>
